<template>
  <div>
    <el-form-item :prop="item.name || ''" :label="item.label" v-bind="item.formItemProps || {}" ref="el-form-item">
      <el-time-select ref="input" v-model="mvalue" v-bind="opt"></el-time-select>
    </el-form-item>
  </div>
</template>

<script>
  import { objectAssign, formatDate, objectAssignWithKeys } from "../../utils/common";
  import Required from "../validMixins/Required";

  export default {
    name: "PopoTimeSelect",
    props: {
      value: { type: [String, Date] },
      item: { type: Object },
      formData: { type: Object },
    },
    mixins: [ Required],
    data() {
      return {
        mvalue: this.value,
        opt: {},
      };
    },
    watch: {
      mvalue(date) {
        // 如果不是要求返回Date，则返回格式化后的Date。
        // 格式化内容和 opt.dateFormat 一致
        // if( !this.item.useDate){
        //     console.log( "timepicker", date);
        //     date = formatDate( date, this.opt.valueFormat);
        // }

        this.$emit("input", date);
        this.emitTimeLimit();
      },
    },
    created() {
      var _defaultPickerOptions = {
        // minTime: "00:00",
        // maxTime: "23:59",
        start: "00:00",
        end: "23:59",
        // step: "00:30:00",
      };
      var opt = objectAssign(
        {
          valueFormat: this.item.valueFormat || "HH:mm:ss",
        },
        this.item.props
      );

      var pickerOptions = objectAssignWithKeys(
        "minTime,maxTime,start,end,step",
        _defaultPickerOptions,
        this.item,
        opt.pickerOptions
      );
      opt.pickerOptions = pickerOptions;
      this.opt = opt;
    },
    methods: {
      // 查看有没有其它的 Timepicker 的minTime配置，用到了当前Timepicker的值
      // 比如用于两个字段的时间范围选择。
      emitTimeLimit() {
        // 当前项的值为 maxTimeFor 所指的组件的 minTime
        if (this.item.minTimeFor) {
          this.$emit("notifyOtherComponent", this.item.minTimeFor, "minTime", this.mvalue);
        }
        // 当前项的值为 minTimeFor 所指的组件的 maxTime
        if (this.item.maxTimeFor) {
          this.$emit("notifyOtherComponent", this.item.maxTimeFor, "maxTime", this.mvalue);
        }
      },
      // 接收到了消息
      handlerNotify(type, val) {
        if (type == "minTime") {
          this.opt.pickerOptions = this.opt.pickerOptions || {};
          this.$set(this.opt.pickerOptions, "minTime", val);
          if (this.mvalue < val) {
            this.mvalue = val;
          }
        }

        if (type == "maxTime") {
          this.opt.pickerOptions = this.opt.pickerOptions || {};
          this.$set(this.opt.pickerOptions, "maxTime", val);
          if (this.mvalue > val) {
            this.mvalue = val;
          }
        }
      },
    },
  };
</script>

<style scoped lang="scss">
::v-deep {
  .el-date-editor {
    width: 100%;
  }
}
</style>

